<script setup lang="ts">
import type Typings from "@/typings";
import { defineOptions } from "vue";

defineOptions({
  name: "xt-dropdown",
});

interface PropType {
  options: Typings.Common.option[];
}

withDefaults(defineProps<PropType>(), {
  options: () => [],
});
</script>

<template>
  <el-dropdown class="xt-dropdown">
    <span class="el-dropdown-link">
      <slot></slot>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in options"
          :key="item.code"
          :command="item.code"
        >
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style lang="scss" scoped>
.el-dropdown-link {
  outline: none;
}
</style>
